<template>
  <view class="shop-container">
    <!-- 筛选栏 -->
    <view class="filter-bar">
      <view
        class="filter-item"
        v-for="(item, index) in filterList"
        :key="index"
        :class="{ active: currentFilter === item.value }"
        @click="handleFilterChange(item.value)"
      >
        <text>{{ item.label }}</text>
      </view>
    </view>

    <!-- 店铺列表 -->
    <view class="shop-list">
      <view
        class="shop-item"
        v-for="(item, index) in shopList"
        :key="index"
        @click="navigateToShop(item.id)"
      >
        <!-- 店铺基本信息 -->
        <view class="shop-header">
          <image :src="item.logo" mode="aspectFill" class="shop-logo"></image>
          <view class="shop-info">
            <text class="shop-name">{{ item.name }}</text>
            <view class="shop-meta">
              <view class="rating">
                <u-icon name="star-fill" color="#ffd700" size="24"></u-icon>
                <text>{{ item.rating }}</text>
              </view>
              <text class="separator">|</text>
              <text class="fans">{{ item.fansCount }}粉丝</text>
              <text class="separator">|</text>
              <text class="products">{{ item.productCount }}商品</text>
            </view>
          </view>
          <view class="follow-btn" :class="{ following: item.isFollowing }" @click.stop="toggleFollow(item)">
            <text>{{ item.isFollowing ? '已关注' : '关注' }}</text>
          </view>
        </view>

        <!-- 店铺热门商品 -->
        <scroll-view class="popular-products" scroll-x>
          <view
            class="product-item"
            v-for="(product, pIndex) in item.popularProducts"
            :key="pIndex"
            @click.stop="navigateToProduct(product.id)"
          >
            <image :src="product.image" mode="aspectFill" class="product-image"></image>
            <text class="product-price">¥{{ product.price }}</text>
          </view>
        </scroll-view>

        <!-- 店铺标签 -->
        <view class="shop-tags">
          <text
            class="tag"
            v-for="(tag, tIndex) in item.tags"
            :key="tIndex"
          >{{ tag }}</text>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <u-loadmore
      :status="loadMoreStatus"
      @loadmore="loadMore"
    ></u-loadmore>
  </view>
</template>

<script>
export default {
  data() {
    return {
      filterList: [
        { label: '综合', value: 'comprehensive' },
        { label: '好评', value: 'rating' },
        { label: '人气', value: 'popularity' }
      ],
      currentFilter: 'comprehensive',
      shopList: [],
      page: 1,
      limit: 10,
      hasMore: true,
      loadMoreStatus: 'loadmore' // loadmore, loading, nomore
    }
  },
  onLoad() {
    this.loadShops()
  },
  onReachBottom() {
    if (this.hasMore && this.loadMoreStatus !== 'loading') {
      this.loadMore()
    }
  },
  methods: {
    handleFilterChange(value) {
      if (this.currentFilter === value) return
      this.currentFilter = value
      this.page = 1
      this.shopList = []
      this.hasMore = true
      this.loadMoreStatus = 'loadmore'
      this.loadShops()
    },
    async loadShops() {
      if (!this.hasMore || this.loadMoreStatus === 'loading') return
      
      this.loadMoreStatus = 'loading'
      
      try {
        const res = await this.$api.get('/shops/recommend', {
          params: {
            page: this.page,
            limit: this.limit,
            sort: this.currentFilter
          }
        })
        
        if (this.page === 1) {
          this.shopList = res.data.list
        } else {
          this.shopList = [...this.shopList, ...res.data.list]
        }
        
        this.hasMore = res.data.list.length === this.limit
        this.loadMoreStatus = this.hasMore ? 'loadmore' : 'nomore'
        this.page++
      } catch (error) {
        console.error('加载推荐店铺失败:', error)
        this.loadMoreStatus = 'loadmore'
        uni.showToast({
          title: '加载失败',
          icon: 'error'
        })
      }
    },
    loadMore() {
      this.loadShops()
    },
    navigateToShop(id) {
      uni.navigateTo({
        url: `/pages/shop/detail?id=${id}`
      })
    },
    navigateToProduct(id) {
      uni.navigateTo({
        url: `/pages/product/detail/index?id=${id}`
      })
    },
    async toggleFollow(shop) {
      try {
        if (shop.isFollowing) {
          await this.$api.delete(`/shops/${shop.id}/follow`)
        } else {
          await this.$api.post(`/shops/${shop.id}/follow`)
        }
        
        shop.isFollowing = !shop.isFollowing
        uni.showToast({
          title: shop.isFollowing ? '关注成功' : '已取消关注',
          icon: 'success'
        })
      } catch (error) {
        console.error('操作失败:', error)
        uni.showToast({
          title: '操作失败',
          icon: 'error'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.shop-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.filter-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  background-color: #ffffff;
  padding: 20rpx;
  margin-bottom: 20rpx;

  .filter-item {
    flex: 1;
    text-align: center;
    font-size: 28rpx;
    color: #666;
    padding: 10rpx 0;
    position: relative;

    &.active {
      color: #ff5500;
      font-weight: bold;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 4rpx;
        background-color: #ff5500;
        border-radius: 2rpx;
      }
    }
  }
}

.shop-list {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.shop-item {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 20rpx;

  .shop-header {
    display: flex;
    align-items: center;
    gap: 20rpx;
    margin-bottom: 20rpx;

    .shop-logo {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .shop-info {
      flex: 1;

      .shop-name {
        font-size: 32rpx;
        color: #333;
        font-weight: bold;
        margin-bottom: 8rpx;
      }

      .shop-meta {
        display: flex;
        align-items: center;
        gap: 12rpx;
        font-size: 24rpx;
        color: #666;

        .rating {
          display: flex;
          align-items: center;
          gap: 4rpx;
        }

        .separator {
          color: #ddd;
        }
      }
    }

    .follow-btn {
      padding: 8rpx 24rpx;
      border-radius: 30rpx;
      background-color: #ff5500;
      
      text {
        font-size: 24rpx;
        color: #ffffff;
      }

      &.following {
        background-color: #f5f5f5;
        
        text {
          color: #666;
        }
      }
    }
  }

  .popular-products {
    white-space: nowrap;
    margin: 0 -20rpx;
    padding: 0 20rpx;
    margin-bottom: 20rpx;

    .product-item {
      display: inline-block;
      margin-right: 20rpx;
      width: 160rpx;

      &:last-child {
        margin-right: 0;
      }

      .product-image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 8rpx;
        margin-bottom: 8rpx;
      }

      .product-price {
        font-size: 24rpx;
        color: #ff5500;
      }
    }
  }

  .shop-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12rpx;

    .tag {
      font-size: 24rpx;
      color: #666;
      background-color: #f5f5f5;
      padding: 4rpx 16rpx;
      border-radius: 20rpx;
    }
  }
}
</style> 